<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js 组件传值</title>
        
        <script src="../../../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <son :msgfromfather="message" :lovefromfather="showLove"></son>
        </div>
        
        <script>
            var son = {
                props: ['msgfromfather', 'lovefromfather'],
                template: '<div><h1>子组件收到：{{ msgfromfather }}</h1><button @click="lovefromfather">打开</button></div>'
            };
            new Vue({
                el: '#app',
                data: {
                    message: '来自父亲的信'
                },
                methods: {
                    showLove: function() {
                        alert(decode('&#x5DF2;&#x7ECF;&#x6709;&#x516B;&#x5E74;&#x4E86;&#x5427;&#xFF0C;&#x4F60;&#x90A3;&#x5934;&#x6708;&#x4EAE;&#x7167;&#x4E0D;&#x7167;&#x5F97;&#x5230;'));
                    }
                },
                components: {
                    son
                }
            });
        </script>
        
        <script>
        function decode(str) {
          return String.fromCharCode.apply(null, str.split(';').map(function(un) {
            return parseInt(un.replace('&#x', ''), 16);
          }).filter(function (num) {
            return !isNaN(num);
          }));
          }
        </script>
    </body>
</html>